<template>
  <div class="flex-start-center">
    <a-input
      v-model:value="searchName"
      style="width: 240px; margin-right: 15px"
      placeholder="请输入搜索地点"
      @keyup.enter="clickSearch"
    />
    <a-button type="primary" @click="clickSearch">定位</a-button>
  </div>

  <div style="margin-bottom:20px">
    <div v-if="resultList.length>1">搜索结果如下：</div>
    <div v-for="item in resultList" :key="item.id">
        {{item.name}}->{{item.location.lat}},{{item.location.lng}}
    </div>
  </div>

  <div id="container"></div>
</template>
 
<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

let placeSearch = null;

onMounted(() => {
  AMapLoader.reset();
  AMapLoader.load({
    key: "b25f28fdc7717669260eb5ca260b6f43", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      });

        placeSearch = new AMap.PlaceSearch({
          map: map,
        });

    })
    .catch((e) => {
      console.log(e);
    });
});

const searchName = ref("");

const resultList=ref([])
const clickSearch = () => {
  console.log(searchName.value);
  placeSearch.search(searchName.value, function (status, result) {
    console.log(result, status);
    resultList.value=result.poiList.pois
  });
};
const keywordSearch_CallBack = (val) => {
  console.log(val);
};
onUnmounted(() => {
  map?.destroy();
});
</script>
 

<style scoped>
#container {
  width: 800px;
  height: 500px;
}
.flex-start-center {
  padding-top: 20px;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
</style>